import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Observer, useLocalStore } from 'mobx-react'
import { GoodEle, Direction } from '@/components/Good'
import Price from '@/components/Price'
import { orderModel } from '@/model/OrderModel'
import { toDate } from '@/utils/utils'
// import cls from 'classnames'
// import { Empty } from '@/components/Empty';
// import { SkeletonEle } from '@/components/Skeleton'

import './index.scss'

export interface OrderProps {
    order: any,
    isCatering: boolean,
}

/**
 * 菜单入口
 * @param param0
 */
export const OrderList: React.FC<OrderProps> = ({ order, isCatering }) => {

    const store = useLocalStore(() => orderModel)
    const [WAIT_PAY, PAY, DONE] = store.ORDER_STATUS_ARRAY;

    return (
        <Observer>
            {
                () => (
                    <View className="xxm-order-list-box">
                        <View
                            className="order__item"
                        >
                            <View
                                className="order__box"
                                onClick={() => {
                                    Taro.navigateTo({ url: '/pages/ucenter/orders-detail/index?id=' + order.id });
                                }}>
                                <View className="flex__1">
                                    {
                                        isCatering &&
                                        <View className="order__title">
                                            {store.ORDER_TYPE[order.order_type]}
                                        </View>
                                    }
                                    <View className="order__time">
                                        {toDate(order.create_time)}
                                    </View>
                                </View>
                                <View className="order__item-status">
                                    {store.ORDER_STATUS[order.status]}
                                </View>
                            </View>
                            <View className="order__goods">
                                {
                                    order.order_goods && order.order_goods.map((it: any, idx: number) => (
                                        <GoodEle
                                            direction={Direction.ROW}
                                            img={it.main_pic}
                                            id={it.id}
                                            title={it.nick || it.goods_name}
                                            desc={it.brief}
                                            price={it.price}
                                            oldPrice={it.market_price}
                                            discount={it.dis}
                                            key={it.id}
                                            number={it.number}
                                            readonly
                                        />
                                    ))
                                }
                            </View>
                            <View
                                className="order__total xxm-hairline--bottom"
                            >
                                共{store.total(order.order_goods)}个菜品,总金额：
                                {/* <Text className="bold">￥{order.all_price}</Text> */}
                                <Price price={order.all_price} type="sale"></Price>
                            </View>
                            <View className="order__action">
                                {

                                    order.status === DONE &&
                                    <Text
                                        className="order__btn"
                                        onClick={() => {
                                            Taro.navigateTo({
                                                url: `/pages/ucenter/rate/index?order_id=${order.order_id}`
                                            });
                                        }}
                                    >评价</Text>
                                }
                                {
                                    order.status === WAIT_PAY &&
                                    <Text
                                        className="order__btn main"
                                        onClick={() => {
                                            store.payById(order.order_id)
                                        }}
                                    >支付</Text>
                                }
                                {
                                    order.status === PAY &&
                                    <Text
                                        className="order__btn main"
                                        onClick={() => {
                                            Taro.navigateTo({
                                                url: '/pages/goods/entry/index'
                                            });
                                        }}
                                    >
                                        继续点菜
                                    </Text>
                                }
                            </View>
                        </View>
                    </View>
                )
            }
        </Observer>
    )
}
